﻿<!doctype html>
<html>
<head>
<title>Options | Back to Top</title>
<style>
body{
	font-family:helvetica, arial, sans-serif; 
	margin:20px;
	width:300px;
	height:200px;
}
h1{
	height:48px;
	line-height:48px;
	background:url(images/icon.png) left top no-repeat;
	text-indent:60px;
	font-size:150%;
}
p{
	margin:10px 0;
}
label{
	margin:5px;
}
</style>
</head>
<body>
<h1>Back to Top Options</h1>
<hr color="silver" size=1/>
<p><input type="checkbox" id="addIcon" name="addIcon"/><label for="addIcon">Add a back-to-top icon to the page</label></p>
<p><input type="checkbox" id="animation" name="animation"/><label for="animation">Enable animation</label></p>
<p><input type="checkbox" id="hotkeys" name="hotkeys"/><label for="hotkeys">Enable hotkeys ( ALT + ↑ )</label></p>
</body>
</html>
<script>
var message = chrome.i18n.getMessage("ext_option_title");
document.getElementsByTagName("title")[0].innerHTML = message;
message = chrome.i18n.getMessage("ext_option_h1");
document.getElementsByTagName("h1")[0].innerHTML = message;

var labels = document.getElementsByTagName("label");
message = chrome.i18n.getMessage("ext_option_addIcon");
labels[0].innerHTML = message;
message = chrome.i18n.getMessage("ext_option_animation");
labels[1].innerHTML = message;
message = chrome.i18n.getMessage("ext_option_hotkeys");
labels[2].innerHTML = message;

var inputs=document.getElementsByTagName('input');
for(var i=0; i!=inputs.length; i++){
	(function(){
		var tThis=inputs[i];
		tThis.checked=localStorage[tThis.name]=='false'?false:true;
		tThis.onchange=function(){
			localStorage[tThis.name]=tThis.checked;
		};
	})();
}
</script>